<template>
  <div class="app-container">
    <el-table ref="multipleTable" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column type="selection" />
      <el-table-column align="center" label="选品库编号" width="120">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="选品库名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="选品库下商品数量"  align="center">
        <template slot-scope="scope">
          {{ scope.row.feedCount }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="{row, $index}">
          <el-button icon="el-icon-edit" type="primary" size="mini" @click="handleUpdate(row, $index)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUserGroupList, getDataFromAlibaba } from '@/api/alibabaCategory'

export default {
  filters: {},
  data() {
    return {
      hidden: false,
      listLoading: true,
      // 翻页相关数据 当前页，每页显示条数，排序方式，排序字段，符合条件的搜索结果数，搜索结果
      currentPage: 1,
      pageSize: 10,
      sort: 'desc',
      order: 'product_id',
      total: 0,
      list: [],
      showReviewer: false,
      // 上级分类数据
      parentArr: {},
      // 二级分类数据
      subParentArr: {},
      // 叶级分类数据
      leafParentArr: {},
      // 下载的loading
      downloadLoading: false,
      downloadData: [],
      changeFlag: false
    }
  },
  mounted() {},
  created() {
    this.fetchData()
  },
  methods: {
    handleUpdate(row, index) {
      console.log(row.id)
      console.log(index)
      getDataFromAlibaba({ 'id': row.id }).then(() => {
        this.$notify({
          title: '采集开始',
          type: 'success',
          message: '后台开启采集任务',
          duration: 2000
        })
      }).catch(error => {
        console.log(error)
        this.$notify({
          title: '采集失败',
          type: 'error',
          message: error.errmsg,
          duration: 2000
        })
      })
    },
    fetchData() {
      this.listLoading = true

      const param = {
        page: this.currentPage,
        page_size: this.pageSize
      }

      getUserGroupList(param).then(response => {
        const { data } = response
        this.list = data
        this.listLoading = false
        this.currentPage = 1
        this.total = 1
        // this.currentPage = parseInt(meta.current_page)
        // this.total = parseInt(meta.total)
        console.log(this)
      }).catch(() => {
        this.listLoading = false
        this.list = []
      })
    }
  }
}
</script>
<style scoped>
  .filter-container {
    background: #fff;
    padding: 32px 16px;
  }
  .yl-table-expand {
    font-size: 0;
  }
  .yl-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .yl-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 12.5%;
  }
</style>
